<style>
label{
	text-align:right;
}
#map-canvas { height: 480px; max-width: 1366px; }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
<script type="text/javascript">
	// var locations = [
		// <?/*php foreach($titik_jalan as $row){?>
			// [<?php echo $row["ID_RUAS"]?>, <?php echo $row["LATITUDE"];?> , <?php echo $row["LONGTITUDE"]?>],
		// <?php }*/?>
	// ];

	function initialize()
	{	
		var mapOptions = {
			zoom: 6,
			center: new google.maps.LatLng(-3.247600, 129.352790),
		};

		var map = new google.maps.Map(document.getElementById('map-canvas'),
		  mapOptions);
		<?php
		$i = 1;
		foreach($ruas_jalan as $row){
		?>
		/* Start */
		var flightPlanCoordinates<?php echo $i; ?> = [
			<?php
			$titik_jalan2 = $this->titik_jalan_model->get_by(array("ID_RUAS"=>$row["ID_RUAS"]));
			foreach($titik_jalan2 as $row2){
			
			?>
			new google.maps.LatLng(<?php echo $row2["LATITUDE"];?>, <?php echo $row2["LONGTITUDE"];?>),
			<?php }?>
			
		];
		var flightPath<?php echo $i; ?> = new google.maps.Polyline({
			path: flightPlanCoordinates<?php echo $i; ?>,
			geodesic: true,
			strokeColor: '#FF0000',
			strokeOpacity: 1.0,
			strokeWeight: 2
		});
		
		var infowindow = new google.maps.InfoWindow();
 
		// var marker, i;
		// var markers = new Array();
	 
		// for (i = 0; i < locations.length; i++) {  
			// marker = new google.maps.Marker({
				// position: new google.maps.LatLng(locations[i][1], locations[i][2]),
				// map: map
			// });			
			
			// markers.push(marker);
		// }

		flightPath<?php echo $i; ?>.setMap(map);
		/* End */
		<?php
		$i++;
		}
		?>
	}
	
	google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4>
					<span>Peta Jalan</span>
				</h4>
			</div>
			<div class="panel-body">
				<div class="col-lg-12">
					<div class="form-group">
						<div class="col-lg-12">
							<div id="map-canvas"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>